 <gm:page title="Floridoogle Mashup" css="resources/floridooglemashup.css" >

<script>   
  var searchUrlBase = 'http://www.google.com/base/feeds/snippets/-/Plants?start-index=1&max-results=250&bq=' ;
  var searchTitleParm = '[title:%22' ;
  var searchUrlSuffix = '%22]' ;  
  var productSearchUrlBase = "http://www.google.com/base/feeds/snippets/-/Products?start-index=1&max-results=250&q=" ;
  var Xlist; 
  var Xitem; 
  var picsArray;
  
function startMashup() {
  document.getElementById('loadingMessage').style.display = "none" ;
  document.getElementById('contentDiv').style.visibility = "visible" ;
}
 
function populateSelects() {
  var familySelect = document.getElementById("familySelect");
  Xlist = google.mashups.getObjectById("Xlist");
 
  if (Xlist.getData().size() != 0) {
  familySelect.innerHTML = '<option selected="selected">Select Family</option>';
  var regGPath = new GPath("atom:summary");
  var familyGPath = new GPath("atom:title");

  for (var i=0; i<Xlist.getData().size(); i++) {
    var entry = Xlist.getData().entryAt(i);
    var option1 = document.createElement("option");
    option1.innerHTML = familyGPath.getValue(entry) + " " + regGPath.getValue(entry);
    option1.value = familyGPath.getValue(entry);
    familySelect.appendChild(option1);
  }
 }
    startMashup();
}
 
 function searchBotanicalNames() {
  var listModule = google.mashups.getObjectById('myList');
  searchUrl = "";
  searchUrl = searchUrlBase + searchTitleParm  +  encodeURI(document.forms[0].searchin.value) + searchUrlSuffix ;

  listModule.setData(searchUrl);
 }
  
 function  searchCommonNames() {
  var listModule = google.mashups.getObjectById('myList');
  var searchcommonbase = "http://www.google.com/base/feeds/snippets?start-index=1&max-results=100&bq=%5Bitemtype%3A%22Plants%22%5D" ;
  searchUrl = "";
  searchUrl = searchcommonbase + "%5Bcommon_names%3A%22" + encodeURI(document.forms[0].searchincom.value) + "%22%5D" ;
  listModule.setData(searchUrl);
 }
  
function listByFamily() {
  var listModule = google.mashups.getObjectById('myList');
  var familySelect = document.getElementById("familySelect");
  searchUrl = searchUrlBase + "[family:" + familySelect.options[familySelect.selectedIndex].value + "]" ;
  listModule.setData(searchUrl);
}

 function setPlantInfoTab(entry) {
  if (entry) {
   var myList = google.mashups.getObjectById("myList").getData();
   var selectedEntry =  google.mashups.getObjectById('myList').getSelectedEntry();

   var picGPath = new GPath("g:image_link");
   var pics = picGPath.getValue(selectedEntry);
   var picslist = pics.split(','); 
   picsArray = picslist;
   var myItem = google.mashups.getObjectById("detail");
   myItem.setEntry(selectedEntry);
   myItem.setTemplate("detailTemplate");
   // give focus to the Plant Detail Tab  
   document.getElementById("plantImages").src = picsArray[0];
   var myContainer = google.mashups.App.getContainer('myContainer');
   myContainer.showSection('sectionPlantInfo'); 
  }
  }
  
  function setProdSearch2Genus()  {
  var myList = google.mashups.getObjectById("myList").getData();
  var selectedEntry =  google.mashups.getObjectById('myList').getSelectedEntry();
  var titleGPath = new GPath("atom:title");
  var plantName = titleGPath.getValue(selectedEntry);
  var genus = plantName.substring(0, plantName.indexOf(" "));
  var productSearchUrl = productSearchUrlBase + genus;

  var myProdList = google.mashups.getObjectById("productList");
   myProdList.setData(productSearchUrl);
  }

 function setProdSearch2Common (searchInString) {
   
 }
   
 function setProdItem() {
// first get all of the plant name info from current Plant List item
var myList = google.mashups.getObjectById("myList").getData();
var selectedEntry = google.mashups.getObjectById('myList').getSelectedEntry();;
var titleGPath = new GPath("atom:title");
var plantName = titleGPath.getValue(selectedEntry);
var genusName = plantName.substring(0, plantName.indexOf(" "));
var comNameGPath = new GPath("g:common_names");
var commonNames = comNameGPath.getValue(selectedEntry);


// update the product item with selected entry data
var prodList = google.mashups.getObjectById("productList");
var selectedProdEntry = prodList.getSelectedEntry();
 
var prodItem = google.mashups.getObjectById("productDetail");
prodItem.setEntry(selectedProdEntry);
prodItem.setTemplate("productEntryTemplate");
 }
 
 function setBuyTab() {
  var myList = google.mashups.getObjectById("myList").getData();
  var selectedEntry =  google.mashups.getObjectById('myList').getSelectedEntry();
  var titleGPath = new GPath("atom:title") ;
  var plantName = encodeURI(titleGPath.getValue(selectedEntry)) ;
  var productSearchUrl = productSearchUrlBase + plantName ;
 
  var myProdList = google.mashups.getObjectById("productList") ;
  myProdList.setData(productSearchUrl);
 }
</script>

<table align="center" style="width:400px; margin:2px; padding-left:2px; padding-right:2px; text-align:left;">
<tr>
 <td valign="top">
 <div style="font-size:14px"><a href="http://www.floridata.com" target="_blank" ><img src="resources/floridoogle80.png" align="left" border="0" alt="Click to visit Floridata.com" /></a>
 Plant Pictures, Profiles and Products</div>
 <div id="loadingMessage" style="display: block; text-align:center; font-size:12px; " ><br />Please wait while Floridoogle loads<br />
  Plant Info from Floridata.com and Google Product Search.
  </div>
  <br />
<div id="contentDiv" style="visibility:hidden; padding:2px; margin:2px">  
 <gm:tabs target="myContainer"/>
 <gm:container id="myContainer">
 <gm:section id="sectionSearch" title="SEARCH Plants">
   
  <form>
  <table width="95%" align="center"  style="padding:0; margin:0; font-size:10px">
    <tr><td align="right" valign="middle" >Search Plants by Genus and/or Species Names<br />
       (example: <i>Acer</i> or <i>Quercus alba</i>)
     </td>
      <td valign="middle" ><input name="searchin" type="text" size="8" maxlength="30" style="padding: 1; margin: 4; font-size:10px;" /> <input type="button" value="Search" onClick="searchBotanicalNames();" style="padding:1; font-size:10px; margin:4; " />
      </td>
      </tr>
    <tr><td align="right" valign="middle"  >...or by Common Name<br />
      (like <i>maple</i> or <i>white oak</i>) </td>
      <td valign="middle" ><input name="searchincom" type="text" size="8" maxlength="30" style="padding:1; margin:4; font-size:10px;" /> <input type="button" value="Search" onClick="searchCommonNames();" style="padding:1; font-size:10px; margin:4;" />
      </td>
     </tr>
     <tr>
       <td colspan="2" valign="middle" align="left">
         List by Family:
        <select id="familySelect" style="margin:2px; font-size:10px;" onchange="listByFamily()" >
<option>init</option></select>
       </td>
      </tr>
   </table>
  </form>
  <div style="display:none;" >
  <gm:list id="Xlist" data="http://www.floridata.com/feeds/RSS_BotanicalFamilies.xml" pagesize="250">
   <gm:handleEvent event="repaint" execute="populateSelects();" />
  </gm:list>
  </div>
  <div style="font-size:10px;">
  <gm:list id="myList" data="${tmp}" pagesize="10"  template="plantList" >
      <gm:handleEvent event="select" execute="setPlantInfoTab(event.entry);" />
   </gm:list>
  </div>
 </gm:section>
 
  <gm:section id="sectionPlantInfo" title="PREVIEW Plant">
    <gm:item id="detail" data="${myList}" template="detailTemplate">
         <gm:handleEvent src="myList" event="select" />
    </gm:item>
  </gm:section>
 
 
 <gm:section id="sectionProductInfo" title="SHOP Plants" >
   <gm:item id="productDetail" template="productEntryTemplate">
    <gm:handleEvent src="productList"  execute="setProdItem();" />
   </gm:item>
   <br clear="all" />
   <table align="center" style="width:95%; font-size:12px;">
     <tr><td id="searchFor" style="background-color:#FFFFCC; color:#009966; font-size:12px;">
   Search for products of 
   <a onclick="setBuyTab()"><b>this species</b></a> or <a onclick="setProdSearch2Genus()"><b>all species in this genus</b></a> <br />
   </td></tr>     
   <tr><td>
     <gm:list id="productList" data="${tmp}" pagesize="10"  template="productListTemplate" >
        <gm:handleEvent src="myList"  event="select" execute="setBuyTab()" />
    </gm:list>
   </td></tr>
  </table>
 </gm:section>

 </gm:container>
</div>

<div style="text-align:left; font-size:10px;">
  <img src="http://www.floridata.com/icons/FDsunflower15.gif"
alt="Floridata.com sunflower graphic" align="left" />
v0.91 beta - Copyright 2008 <a href="http://www.floridata.com/"
target="_blank" >Floridata.com LLC</a>; Tallahassee, FL USA
</div>
</td>
</tr>
</table>

<gm:template id='plantList'>
<table style="width:95%; font-size:12px;" >
<tr><td colspan="3" align="center">
  <gm:pager />
</td>
</tr>
<tr repeat="true" style="font-size:10px; text-align:left;" >
<td  width="10%"><gm:text ref="g:fdid" /></td>
<td  width="40%"><i><b><gm:html ref="atom:title" /></b></i></td>
<td><gm:text ref="g:common_names" /></td>
</tr>
</table>
</gm:template>

<gm:template id="detailTemplate">
<div repeat="true" style="font-size:12px" >
<img src="resources/floridata_logo88.png" alt="click for a Floridata Plant Profile" align="left" /> #<gm:text ref="g:fdid" />  
<i><gm:link ref="atom:link[@rel='alternate']/@href" labelref="atom:title" /></i>
<br clear="all" />
<span style="text-align:left;font-size:10px">Common Names: <gm:text ref="g:common_names"/>
</span>
<div style="text-align:center">
  <img src="resources/loadingImage150.png" id="plantImages" alt="plant image"><br />
<i><gm:link ref="atom:link[@rel='alternate']/@href" labelref="atom:title" /></i><br />
  <span style="font-size:12px"><gm:html ref="atom:content" />
   <gm:link label="click to read the entire Plant Profile &raquo;" ref="atom:link[@rel='alternate']/@href"  />
  </span>
</div>
</div>
</gm:template>

<gm:template id='productListTemplate'>
<div align="center" style="font-size:10px;"><gm:pager/></div><br />
<table width="95%">
  <tr repeat="true">
  <td style="font-size:10px;" >
  <gm:html ref="atom:title" />
  </td>
  <td style="font-size:9px" ><gm:text ref="atom:author/atom:name" /></td>
  </tr>
</table>
</gm:template>

<gm:template id="productEntryTemplate">
<table width="95%" >
  <tr>
  <td style="font-size:12;" valign="top">
   <gm:image ref="g:image_link" />
  </td>
    <td valign="top" style="padding-left:13; font-size:12;">
    <b><gm:link ref="atom:link[@rel='alternate']/@href" labelref="atom:title" /></b><br />
    <span style="font-size:10px">
    Price: <b><gm:number ref="g:price" /></b> offered by: <gm:text ref="atom:author/atom:name" /><br />
       <gm:html ref="atom:content" />
     <gm:link ref="atom:link[@rel='alternate']/@href" label="Click to buy/more info" />
    </span>
  </td></tr>
</table>
</gm:template>

</gm:page>
